import Vue from 'vue'
import app from './App.vue'
import RouterVue from 'vue-router'
import router from './router.js'
import VueResource from 'vue-resource'
import Vuex from 'vuex'

import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui';

// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Header.name, Header);
// Vue.component(Button.name, Button);

// Vue.use(Lazyload);

import MintUI from 'mint-ui'

Vue.use(MintUI)

import 'mint-ui/lib/style.css'

import moment from 'moment'
//导入格式化时间的插件 

import VuePreview from 'vue-preview'

Vue.use(VuePreview)


Vue.use(RouterVue)
Vue.use(VueResource)

Vue.use(Vuex)

Vue.http.options.root = 'http://localhost';
Vue.http.options.emulateJSON = true;

Vue.filter('dataFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(dataStr).format(pattern)
})

var car = JSON.parse(localStorage.getItem('car') || '[]')

var store = new Vuex.Store({
  state: { // this.$store.state.***
    car: car //{ id: 商品的id; count: 要购买的数量; price: 商品的单价; selected: false}
  },
  mutations: {  // this.$store.commit('方法名', '按需传入的唯一的参数')
    addToCar(state, goodsinfo) {
      var flag = false
      state.car.some( item => {
        if( item.id == goodsinfo.id){
          item.count += parseInt( goodsinfo.count )
          flag = true
          return true
        }
      })

      if( !flag ){
        state.car.push(goodsinfo)
      }

      // 当更新 car 之后，把 car 数组存储到本地的 localStorage 中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updateCount(state, goodsinfo) {

      state.car.some( item => {
        if( item.id == goodsinfo.id){
          item.count = parseInt(goodsinfo.count)
          return true
        }
      })

      localStorage.setItem('car', JSON.stringify(state.car))
    },
    removeFromCar(state, id) {
      state.car.some( (item, i) => {
        if(item.id == id){
          state.car.splice(i, 1)
          return true
        }
      })

      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updateSelected(state, info) {
      state.car.some( item => {
        if(item.id == info.id){
          item.selected = info.val
          return true
        }
      })

      localStorage.setItem('car', JSON.stringify(state.car))
    }
  },
  getters: {  // this.$store.getters.***
    getAllCount(state) {
      var counts = 0;
      state.car.forEach( item => {
        counts += item.count;
      })
      return counts;
    },
    getGoodsCount(state) {
      var obj = {}
      state.car.forEach( item => {
        obj[item.id] = item.count
      })
      return obj
    },
    getGoodsSelected(state) {
      var obj = {}
      state.car.forEach( item => {
        obj[item.id] = item.selected
      })
      return obj
    },

    getCoodsCountAndPrice(state) {
      var obj = {
        count: 0,
        price: 0
      }
      state.car.forEach( item => {
        if(item.selected){
          obj.count += item.count
          obj.price += item.price * item.count
        }
      })
      return obj
    }
  }
})

var vm = new Vue({
  el: '#app',
  render:  h => h(app),
  router,
  store
})